/*
 * @Author: your name
 * @Date: 2021-10-05 11:05:48
 * @LastEditTime: 2021-11-22 10:26:30
 * @LastEditors: Shentong
 * @Description: 我的优惠券
 * @FilePath: /distribution/src/pages/coupon/index.tsx
 */
import React, { useEffect, useState, useCallback } from 'react';
import Taro, { usePullDownRefresh, useRouter } from '@tarojs/taro';
import { View, Image } from "@tarojs/components";

import { connect } from 'react-redux'

import { showToast } from '@/utils/index';

import { getCouponList } from '@/api/coupon'
import NoDataIcon from '@/src/assets/icon/noDataIcon.png'

import styles from './index.module.scss'

const Coupon = ({ dispatch, curConponList }) => {
    const [couponList, setCouponList] = useState<Array<any>>([])
    const routerParams = useRouter().params;

    const dataList = useCallback(() => {
       Taro.showLoading({ title: "加载中...", mask: true });
        if (routerParams.fromPage === 'submitOrder') {
            setCouponList([...curConponList])
            setTimeout(() => Taro.hideLoading(), 500)
        } else {
            getCouponList().then((res) => {
                const { data } = res
                setCouponList(data)
                setTimeout(() => Taro.hideLoading(), 500)
            }).finally(() => {
                Taro.stopPullDownRefresh();
            })
        }
    }, [curConponList, routerParams.fromPage])


    const cupontClik = (item) => {
        if (!item.isUse) {
            return showToast('优惠券已失效')
        }
        if (routerParams.fromPage === 'submitOrder') {
            dispatch({ type: 'COUPONID', payload: {
                couponId: item.userCouponSId || ''
            }})
            Taro.navigateBack()
        } else {
            Taro.navigateTo({
                url: `/pages/detail/index?shopId=${item.shopSId}`
            })
        }

    }

    useEffect(() => {
        dataList()
    },[dataList]);

    usePullDownRefresh(() => {
        dataList()
    })

    return (
        <View className={styles.coupon}>
            {couponList.map((item, index) => {
                return (
                    <View className={styles.list} key={index} onClick={() => cupontClik(item)}>
                        <View className={styles.top}>
                            <View className={styles.shopImageUrl}>
                                <Image src={item.shopImageUrl} className={`${styles.imgIcon} ${!item.isUse ?  styles.grayBg : ''}`}></Image>
                            </View>
                            <View className={styles.content}>
                                <View className={styles.namePrice}>
                                    <View className={`${styles.name} ${!item.isUse ?  styles.grayBg : ''}`}>{item.shopName || '--'}</View>
                                    <View className={`${styles.price} ${!item.isUse ?  styles.grayBg : ''}`}>￥{item.minusAmount}.0</View>
                                </View>
                                <View className={styles.other}>
                                    <View>有效期至{item.validTime || '--'}</View>
                                    <View>满{item.fullAmount}元可用</View>
                                </View>
                            </View>
                        </View>
                        <View className={styles.bottom}>
                            <View className={styles.desc}>可与其他活动优惠同时享受。在线支付享受</View>
                            <View className={`${styles.useNow} ${!item.isUse ?  styles.grayBg : ''}`}>立即使用</View>
                        </View>
                    </View>
                )
            })}
            {
                !couponList.length && (
                    <van-empty description='暂无数据' image={NoDataIcon} />
                )
            }


        </View>
    )
}


export default connect(({ curConponList }) => ({
    curConponList
  }), dispatch => ({
    dispatch
  }))(Coupon)
